Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / messages / telemetry / TelemetryHistoryModal.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tff7b72<templateTff7b72>

Tff7b72<Teleport Te6edf3to=Ta5d6ff"body"Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"modelValue"

Te6edf3class=Ta5d6ff"fixed inset-0 z-100 flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs"

@Te6edf3click.self=Ta5d6ff"close"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"w-full max-w-lg bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh]"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"px-6 py-4 border-b border-gray-100 dark:border-zinc-800 flex items-center justify-between"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center gap-2 min-w-0"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"satellite-variant" Te6edf3class=Ta5d6ff"size-6 text-blue-500 shrink-0" Tff7b72/>

Tff7b72<h3 Te6edf3class=Ta5d6ff"text-lg font-bold text-gray-900 dark:text-white truncate"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"messages.telemetry_history_modal_title"Tff7b72) Tff7b72}}

Tff7b72</h3>

Tff7b72</div>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"text-gray-400 hover:text-gray-500 dark:hover:text-zinc-300 transition-colors shrink-0"

@Te6edf3click=Ta5d6ff"close"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"close" Te6edf3class=Ta5d6ff"size-6" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"flex-1 overflow-y-auto p-4 space-y-3"Tff7b72>

Tff7b72<div Te6edf3v-if=Ta5d6ff"telemetryItems.length === 0" Te6edf3class=Ta5d6ff"text-center py-8 text-gray-400 dark:text-zinc-500"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"messages.telemetry_history_empty"Tff7b72) Tff7b72}}

Tff7b72</div>

Tff7b72<TelemetryHistoryListItem

Te6edf3v-for=Ta5d6ff"item in telemetryItems"

Te6edf3:key=Ta5d6ff"item.lxmf_message.hash"

Te6edf3:item=Ta5d6ff"item"

Te6edf3:format-time-ago=Ta5d6ff"formatTimeAgo"

@Te6edf3location-click=Ta5d6ff"$emit('location-click', $event)"

Tff7b72/>

Tff7b72</div>

Tff7b72<div

Te6edf3class=Ta5d6ff"flex flex-col gap-3 border-t border-gray-100 bg-gray-50/40 px-6 py-4 dark:border-zinc-800 dark:bg-zinc-900/25"

Tff7b72>

Tff7b72<TelemetryBatteryChart

Te6edf3v-if=Ta5d6ff"batteryHistory.length > 1"

Te6edf3:samples=Ta5d6ff"batteryHistory"

Te6edf3:id-suffix=Ta5d6ff"gradientIdSuffix"

Tff7b72/>

Tff7b72<div

Te6edf3class=Ta5d6ff"flex w-full items-center justify-between gap-3"

Te6edf3:class=Ta5d6ff"

batteryHistory.length > 1 ? 'border-t border-gray-200/80 pt-3 dark:border-zinc-700/80' : ''

"

Tff7b72>

Tff7b72<label Te6edf3class=Ta5d6ff"flex items-center gap-2 cursor-pointer group min-w-0"Tff7b72>

Tff7b72<input

Te6edf3:checked=Ta5d6ff"showTelemetryInChat"

Te6edf3type=Ta5d6ff"checkbox"

Te6edf3class=Ta5d6ff"rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500 shrink-0"

@Te6edf3change=Ta5d6ff"onShowTelemetryChange"

Tff7b72/>

Tff7b72<span

Te6edf3class=Ta5d6ff"text-xs font-medium text-gray-600 dark:text-zinc-400 group-hover:text-gray-900 dark:group-hover:text-zinc-200"

Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"messages.telemetry_show_in_chat"Tff7b72) Tff7b72}}Tff7b72</span

>

Tff7b72</label>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"px-4 py-2 bg-blue-600 text-white text-xs font-bold rounded-lg hover:bg-blue-700 transition-colors shadow-xs shrink-0"

@Te6edf3click=Ta5d6ff"close"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"messages.telemetry_history_done"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</Teleport>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

import TelemetryBatteryChart from "./TelemetryBatteryChart.vue";

import TelemetryHistoryListItem from "./TelemetryHistoryListItem.vue";

import { batteryHistoryFromTelemetryItems } from "../../../js/telemetryBatteryChartSpec.js";

export default {

name: "TelemetryHistoryModal",

components: {

MaterialDesignIcon,

TelemetryBatteryChart,

TelemetryHistoryListItem,

},

props: {

modelValue: {

type: Boolean,

default: false,

},

telemetryItems: {

type: Array,

default: () => [],

},

showTelemetryInChat: {

type: Boolean,

default: false,

},

formatTimeAgo: {

type: Function,

required: true,

},

gradientIdSuffix: {

type: String,

default: "peer",

},

},

emits: ["update:modelValue", "update:showTelemetryInChat", "location-click"],

computed: {

batteryHistory() {

return batteryHistoryFromTelemetryItems(this.telemetryItems);

},

},

methods: {

close() {

this.$emit("update:modelValue", false);

},

onShowTelemetryChange(e) {

this.$emit("update:showTelemetryInChat", e.target.checked);

},

},

};

Tff7b72</script>